<template>
  <nf-form
    v-form-drag="extendFormProps"
    :model="_meta"
    :partModel="_partMeta"
    v-bind="extendFormProps"
  >
  </nf-form>
</template>

<script>
import { reactive, watch } from 'vue'
import { nfForm } from '../map'
import { extendSetup } from './miniMeta'
import { state } from '../main'

import item_select from '../json/item-select.json'

const _temp = {
  160: `<el-select
  v-model="select"
  v-bind="itemProps"
/>`,
  161: `<el-select
  v-model="select"
  v-bind="itemProps"
  multiple
/>`,
  162: `<el-select
  v-model="value"
  v-bind="itemProps"
>
  <el-option-group
    v-for="group in options"
    :key="group.label"
    :label="group.label"
  >
    <el-option
      v-for="item in group.options"
      :key="item.value"
      :label="'　　' + item.label"
      :value="item.value"
    >
    </el-option>
  </el-option-group>
</el-select>`,
  163: `<el-select
  v-model="value"
  v-bind="itemProps"
  multiple
>
  <el-option-group
    v-for="group in options"
    :key="group.label"
    :label="group.label"
  >
    <el-option
      v-for="item in group.options"
      :key="item.value"
      :label="'　　' + item.label"
      :value="item.value"
    >
    </el-option>
  </el-option-group>
</el-select>`,
  164: `<el-cascader
  v-model="value"
  v-bind="itemProps"
>
</el-cascader>`,
  165: `<el-select
  v-model="select"
  v-bind="itemProps"
/>`
}

</script>

<script setup>
 // 定义属性，接收传递来的 meta
  const props = defineProps({
    temp: Object, // 返回模板
    miniMeta: Object,
    mainMeta: Object
  })
  
  // 设置模板
  watch(() => state.itemMeta.controlType, (type) => {
    state.outputItem.temp.html = _temp[type]
    state.outputItem.temp.name = 'itemProps'
  }, {immediate: true})

  // 文本类扩展属性表单，需要的 meta
  const extendFormProps = reactive(item_select)

  const {
    _meta,
    _partMeta
  } = extendSetup(props, item_select.itemMeta)

</script>